<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>发悬赏</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/commontCust.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/title.css" />
		<style>
			.imgWrap {
				width: 40%;
				height: 100%;
				object-fit: cover;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav home_top">
			<h1 class="mui-title"><span lang>发悬赏</span></h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="title_right" id="transfer_out_record" lang>我的悬赏</a>
		</header>
		<div style="width: 100%;height: 100%;margin-top: 58px;" class="divCenter" id="content" v-cloak>
			<div style="width: 96%;height: 100%;" class="divColumn">
				<div style="width: 100%;height: 60px;background: url(../../img/xs_bk.png);background-size: 100% 100%;" class="divCenter">
					<span style="color: white;font-size: 18px;">用户余额：5000.00</span>
				</div>
				<div style="width: 100%;height: 60px;background: white;border-radius: 5px;margin-top: 10px;padding: 0px 10px;" class="divRow divColumnCenter">
					<span style="color: black;font-size: 14px;">悬赏标题：</span>
					<input style="color: black;font-size: 14px;border-width: 0px;" placeholder="请输入标题" />

				</div>
				<!--	 <div style="width: 100%;height: 60px;background: white;border-radius: 5px;margin-top: 8px;padding: 0px 10px;" class="divRow divColumnCenter">
					<span style="color: black;font-size: 14px;">悬赏数量：</span>
					<input style="color: black;font-size: 14px;border-width: 0px;" placeholder="请输入悬赏数量" />

				</div>-->

				<div style="width: 100%;height: 60px;background: white;border-radius: 5px;margin-top: 8px;padding: 0px 10px;" class="divRow divColumnCenter">
					<span style="color: black;font-size: 14px;">发布费用：</span>
					<span style="color: black;font-size: 14px;border-width: 0px;"> 100</span>

				</div>
				<!--<div class="leftAndRight" style="width: 100%;padding: 4px;">
					<span></span>
					<span style="color: red;font-size: 12px;">* 扣除保证金</span>
				</div>-->
				<span style="color: black;font-size: 14px;margin-left: 10px;margin-top: 10px;">填写悬赏内容</span>
				<div style="width: 100%;background: white;height: auto;border-radius: 5px;margin-top: 10px;padding: 10px;" class="divColumn">
					<!--展示需求内容分-->
					<div class="divColumn" id="divWrap">

					</div>
					<!--发布内容-->
					<div class="divColumn" style="margin-top: 10px;">

						<textarea placeholder="文字内容信息" style="font-size: 14px;border-width: 0px;min-height: 100px;margin: 0px;padding: 0px;" id="text"></textarea>

						<div>
							<a href="#picture"><img :src="imgAdd" style="width: 70px;height: 70px;" /></a>
						</div>

					</div>

					<div style="width: 100%;" class="divCenter">

						<span style="width: 32%;height: 42px;background: #05508a;line-height: 42px;text-align: center;color: white;border-radius: 5px;margin-top: 20px;" id="next">
							下一步
							
						</span>

					</div>

				</div>
				<div style="width: 100%;margin-bottom: 60px;" class="divCenter">

					<span style="width: 90%;height: 46px;background: #006699;line-height: 46px;text-align: center;color: white;border-radius: 5px;margin-top: 30px;">
							确认提交
							
						</span>

				</div>

			</div>

		</div>

		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="xiangce" lang>相册</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="paizao" lang>拍照</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture" lang><b>取消</b></a>
				</li>
			</ul>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../mall/vue/vue.min.js"></script>
		<script src="../../mall/vue/swiper/swiper.min.js"></script>
		<script src="../../mall/vue/vue-scroller.min.js"></script>
		<script src="../../js/jquery-2.1.4.js"></script>
		<script>
			mui.init();
			mui.back();
			var content = new Vue({
				el: '#content',
				data: {
					dataList: [{}, {}, {}],
					imgLoc: '../../img/default_shop.jpg',
					imgAdd: '../../img/caram_img.png'

				},

				created: function() {},
				beforeMount: function() {

				},
				mounted: function() {

				},
				methods: {}

			});

			$('#transfer_out_record').click(function() {
				mui.openWindow({
					url: 'my_xs.html',
					id: 'my_xs.html'
				})

			});
			/**/
			$('#next').click(function() {
				content.imgAdd = '../../img/caram_img.png'
				var text_ = $('#text').val();
				var $divWrap = $('#divWrap');
				var str = ($divWrap.children().length + 1) + "、" + text_;
				$divWrap.append(`<div style="margin-top: 10px;">
							<span>` + str + `</span>
							<div class="divCenter" style="height: 80px;">
								<img src=` + content.imgLoc + ` class="imgWrap" />
							</div>
						</div>`);

				$('#text').val('')

			})
		</script>
		<script src="js/send_xs.js"></script>
	</body>

</html>